<template>
    <div id="chatInfo">

        <el-row :gutter="20" v-for="(item,index) in chatInfo" :key="index">
            <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-checkbox v-model="item.is_all" @change="checkItem(item.id,index)"></el-checkbox>
                </div>
            </el-col>
            <el-col :span="2"><div class="grid-content bg-purple">{{item.id}}</div></el-col>
            <el-col :span="4"><div class="grid-content bg-purple">{{item.num}}</div></el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-switch  active-text="审核是否通过" v-model="item.is_show" @change="is_Show($event,item.id)"> </el-switch>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <el-button type="primary" @click="delectChat(item.id)">刪除</el-button>
                    <el-button type="primary" @click="uodateChat(item.id)">编辑</el-button>
                </div>
          </el-col>
      </el-row>

    </div>
</template>

<script>
import {update_chat_info} from '@/network/allMessage/chat'
export default {
    name:'chatInfo',
    data(){
        return{
            temp_arr:[]
        }
    },
    props:{
        chatInfo:{
            type:[Array,Object,String]
        },
        is_all:{
            type:[Boolean]
        }
    },
    methods:{
        //修改审核状态
        is_Show(event,id){
            let nowData = {
                operation_type:'update',
                id:id,
                data:event
            }
            update_chat_info(nowData).then(res => {
                //console.log(res)
            }).catch( err => {
                console.log(err)
            })
        },
        delectChat(id){
            let nowData = {
                operation_type:'delete',
                id:[]
            }
            nowData.id.push({id:id})
            this.$emit('delete_one',nowData)
        },
        //多选
        checkItem(id,index){
            if(this.chatInfo[index].is_all == true){
                this.temp_arr.push({id:id})
            }

            if(this.chatInfo[index].is_all == false){
                if(this.temp_arr.length !== 0){
                     this.temp_arr.forEach((item,index) => {
                        if(item.id == id){
                            this.temp_arr.splice(index,1)
                        }
                    })
                }
            }
            this.$emit('check_item', this.temp_arr)  
        },
        //修改chat
        uodateChat(id){
            this.$router.push({
                name:'chatUpdate',
                params: { 
                    id:id
                }
            })
        }
    },
    watch:{
        is_all(newVal){
            if(newVal == true){
                this.chatInfo.forEach((item,index) => {
                    if(this.chatInfo[index].is_all == false){
                        this.chatInfo[index].is_all = true
                        this.checkItem(this.chatInfo[index].id,index)
                    }  
                })
            }else{
                if(this.temp_arr.length == this.chatInfo.length){
                     this.chatInfo.forEach((item,index) => {
                        this.chatInfo[index].is_all = false
                        this.checkItem(this.chatInfo[index].id,index)
                    })
                }
               
            }
            
        }
    }
}
</script>

<style lang="scss" scoped>
.bg-purple{
    margin-top: 10px;
}

.grid-content {
    text-align: center;
    padding: 10px 0;
}
</style>